<template>
	<div id="movie">
	<div id="movie-tab">
		<router-link tag="span" to="/movie/city">北京<i class="fa fa-caret-down"></i></router-link>
		<router-link tag="span" to="/movie/now">正在热映</router-link>
		<router-link tag="span" to="/movie/coming">即将上映</router-link>
		<router-link tag="span" to="/movie/search"><i class="fa fa-search"></i></router-link>
	</div>
	<hr />
	<keep-alive>
		<router-view></router-view>
	</keep-alive>
	
	</div>
</template>

<script>
</script>

<style scoped>
#movie{
	padding-top: 50px;
	padding-bottom:50px ;
}
#movie-tab{
	display: flex;
	flex-direction: row;
}
#movie-tab span{
	flex: 1;
	/* border: 1px solid red; */
	text-align: center;
	height: 40px;
	line-height: 40px;
}
.router-link-active{
	color: #F03D37;
	border-bottom: 2px solid #F03D37;
}
.fa-search{
	color: red;
	
}
hr{
	border: 0;
	border-bottom: #ccc solid 1px;
	margin-top: 1px;
}
</style>
